<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.go(-1)"
      class="title"
    />

    <!-- 索引列表 -->
    <van-index-bar highlight-color="#21b97a" :index-list="indexList" :sticky="true">

      <!-- 当前城市 -->
      <van-index-anchor index="当前城市" />
      <van-cell :title="currentCity" />

      <!-- 热门城市 -->
      <hot-city></hot-city>

      <!-- A-Z -->
      <city-item
        v-for="(item, index) in indexNew"
        :key="index"
        :list="list"
        :indexItem="item"
      ></city-item>

    </van-index-bar>

  </div>
</template>

<script>
import CityItem from '@/components/CityItem.vue'
import HotCity from '@/components/HotCity.vue'
import { getCityList } from '@/api/citydata'
import { getCityToken } from '@/utils/storage'
export default {
  name: 'city-list',
  components: {
    CityItem,
    HotCity
  },
  computed: {
    // 截取A-Z
    indexNew () {
      return this.indexList.join('').substr(2).split('')
    },
    // 当前城市
    currentCity () {
      return getCityToken() || '上海'
    }
  },
  data () {
    return {
      list: [],
      indexList: ['#', '热', 'A', 'B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'Q', 'S', 'T', 'W', 'X', 'Y', 'Z']
    }
  },
  async created () {
    const { body } = await getCityList()
    console.log(body)// 获取城市列表
    this.list = body
  }
}
</script>

<style></style>
